<script setup lang="ts">
import { computed, onMounted, ref } from 'vue';

import { Alert } from 'ant-design-vue';

import { getCategoryList, getImageList } from '#/api';

import ImageEdit from './components/ImageEdit.vue';
import ImageHeader from './components/ImageHeader.vue';
import ImageList from './components/ImageList.vue';
import Tabs from './components/Tabs.vue';

// 选中的图片id
const selectedImageId = ref<number[] | string[]>([]); // 明确指定类型

interface Image {
  id: number;
  imageUrl: string;
  categoryName: string;
  isRecommend: boolean;
  isRoomTypeCover: boolean;
}
interface ImageListType {
  name: string;
  id: number;
  num: number;
  imageList: Image[] | undefined;
}

// 图片列表
const list = ref<ImageListType[]>([]);

interface Tab {
  name: string;
  id: number;
  num: number;
}

// 是否为编辑状态
const isEdit = ref<boolean>(false);
// 编辑图片
const imageEdit = ref<boolean>(false);
// 当前在编辑图片信息
const imageInfo = ref<Image | undefined>();

// 分类tab列表
const tabList = ref<Tab[]>([]);
const categoryList = ref([]);

// 当前选中的tab分类
const currentTabId = ref<number | string>('all');
const currentTabName = computed(() => {
  return (
    tabList.value?.find((item) => item.id === currentTabId.value)?.name || ''
  );
});

// 获取分类列表
const getCategory = async () => {
  try {
    const { data } = await getCategoryList();
    const total = data
      .map((item: { num: number }) => item.num)
      .reduce((sum: number, num: number) => sum + num, 0);
    tabList.value = [{ name: '全部', id: 'all', num: total }, ...data];
    categoryList.value = data || [];
  } catch (error) {
    console.error('获取分类列表错误：', error);
  }
};

// 获取图片列表
const getList = async () => {
  try {
    const { data } = await getImageList({
      categoryId: currentTabId.value === 'all' ? '' : currentTabId.value,
    });
    list.value = data || [];
  } catch (error) {
    console.error('获取图片列表失败：', error);
  }
};

const init = () => {
  getList();
  getCategory();
};

// tab切换
const handleTab = (item: Tab) => {
  currentTabId.value = item.id;
  list.value = [];
  getList();
};

// 初始化获取分类列表以及图片列表
onMounted(() => {
  // 获取分类列表
  getCategory();
  // 获取列表
  getList();
});

// 图片选中
const changeCheck = (id: number[] | string[]) => {
  // id返回是个数据，然后把与selectedImageId比较，如果有相同的，就删除，没有相同的，就添加
  selectedImageId.value = id || [];
};

// 头部操作按钮点击
const headEdit = (bool: boolean, type: string) => {
  // 如果是设置精选时，需要拿出所有图片list中为精选isRecommend为true的id
  selectedImageId.value =
    type === 'selected'
      ? list.value
          ?.filter((item) => item.imageList?.some((img) => img.isRecommend))
          .flatMap((item) => item.imageList?.map((img) => img.id) || [])
      : [];
  isEdit.value = bool;
};

// 编辑图片
const editImage = (image: Image) => {
  imageInfo.value = image;
  imageEdit.value = true;
};

// 编辑弹窗关闭事件
const editPop = () => {
  imageEdit.value = false;
  getList();
};
</script>

<template>
  <div
    class="absolute bottom-0 right-0 flex h-[100%] w-[100%] flex-col overflow-hidden"
  >
    <div class="main overflow-auto p-4">
      <Alert
        class="mb-3 rounded-md py-3"
        message="每间客房需上传至少4张图，包括至少1张带床图片，1张卫生间图片。"
        show-icon
        type="info"
      />
      <ImageHeader
        :category-list="categoryList"
        :selected-image-id="selectedImageId"
        @edit="headEdit"
        @up-data-list="init"
      />
      <div class="card-box rounded-md px-4 pb-5">
        <!-- 分类列表 -->
        <Tabs :list="tabList" :value="currentTabId" @changle="handleTab" />
        <!-- 图片列表 -->
        <ImageList
          :category-list="categoryList"
          :current-tab-id="currentTabId"
          :current-tab-name="currentTabName"
          :is-edit="isEdit"
          :list="list"
          :selected-image-id="selectedImageId"
          @change-check="changeCheck"
          @edit-image="editImage"
          @up-data-list="init"
        />
      </div>
    </div>
    <ImageEdit
      v-model:info="imageInfo"
      :category-list="categoryList"
      :image-edit="imageEdit"
      :selected-image-id="selectedImageId"
      @close="editPop"
      @up-data-list="init"
    />
  </div>
</template>

<style scoped lang="scss"></style>
